<template>
  <div>
    <ul>
      <!--comingsoonlist 使用定义好的计算属性comingsoonlist-->
      <li v-for="data in comingsoonlist" :key="data.filmId" @click="handleClick(data.filmId)">
        <img :src="data.poster"/>
        <h3>{{ data.name }}</h3>
        <p>主演: {{ data.actors | actorsfilter }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'Comingsoon',
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    if (this.comingsoonlist.length === 0) {
      // 第一步：发起点，调用store中action对象里的GetComingSoonAction方法
      this.$store.dispatch('GetComingSoonAction', '传去参数')
    } else {
      console.log('使用缓存数据state', this.comingsoonlist)
      console.log('使用缓存数据getters', this.filterComingSoonList)
    }
  },
  methods: {
    handleClick (id) {
      // 跳转路由--编程式导航
      this.$router.push(`/detail/${id}`)
      // 带名字的跳转方式
      // this.$router.push({
      //   name: 'detailId',
      //   params: { id: id }
      // })
    }
  },
  computed: {
    // 利用vuex的mapState 定义计算属性comingsoonlist
    // 计算属性comingsoonlist和Vuex.Store对象里state对象里comingsoonlist属性相对应
    // 第四步 利用store辅助函数mapState，把comingsoonlist变成一个计算属性来用
    ...mapState(['comingsoonlist']),
    ...mapGetters(['filterComingSoonList'])// 对应Store里getters里filterComingSoonList这个方法
  }
}
</script>

<style scoped lang="scss">
li {
  overflow: hidden;

  img {
    width: 100px;
    float: left;
  }
}
</style>
